<template>
  <div class="square-container">
    <el-card>
      <el-row>
        <el-col :span="4">
          <el-input
            placeholder="昵称、内容搜索"
            prefix-icon="el-icon-search"
          />
        </el-col>
        <el-col :span="10"><span class="text">社区列表</span>
          <el-select v-model="value" placeholder="请选择社区" style="width: 160px;">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- </el-col>
        <el-col :span="5"> -->
          <span class="text">是否下架</span>
          <el-select v-model="value" placeholder="是否下架" style="width: 160px;">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select></el-col>

        <el-button type="info" icon="el-icon-search">搜索</el-button>
        <el-button type="danger">批量删除</el-button>
        <el-button type="success">批量上架</el-button>
        <el-button type="warning">批量下架</el-button>
      </el-row>
      <el-table
        :data="tableData"
        border
        style="width:100%;margin-top:20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="80"
          align="center"
        />
        <el-table-column
          prop="name"
          label="发帖人"
          width="120"
          align="center"
        />
        <el-table-column
          prop="portrait"
          label="头像"
          align="center"
          width="120"
        />
        <el-table-column
          prop="address"
          label="内容"
          align="center"
          min-width="240"
        />
        <el-table-column
          prop="tupian"
          label="图片"
          align="center"
          width="180"
        />
        <el-table-column
          prop="date"
          label="发帖时间"
          align="center"
          width="180"
        />
        <el-table-column
          label="操作"
          width="300"
          align="center"
        >
          <template v-slot="{row}">
            <el-button
              type="primary"
              size="small"
              @click="viewDetails(row.id)
              "
            >详情</el-button>
            <el-button type="warning" size="small">评论</el-button>
            <el-button type="success" size="small">下架</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="showDialog" title="帖子详情">
      <el-card style="margin:0 20px">
        <el-row>
          <el-col :span="8" class="left">头像</el-col>
          <el-col :span="16" class="right">照片</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="left">发帖人</el-col>
          <el-col :span="16" class="right">照片</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="left">头像</el-col>
          <el-col :span="16" class="right">照片</el-col>
        </el-row>
      </el-card>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'Square',
  data() {
    return {
      options: [{ id: 1, label: 'ss', value: '商家' }, { id: 2, label: 'ss', value: '商家' }],
      value: '',
      tableData: [{
        id: 1,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        portrait: '头像',
        tupian: '图片'
      }, {
        id: 2,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        portrait: '头像',
        tupian: '图片'
      }, {
        id: 3,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        portrait: '头像',
        tupian: '图片'
      }, {
        id: 4,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        portrait: '头像',
        tupian: '图片'
      }, {
        id: 5,
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        portrait: '头像',
        tupian: '图片'
      }],
      multipleSelection: [], // 保存批量操作选中的数据
      showDialog: false
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
    },
    viewDetails(id) {
      this.showDialog = true
      console.log(id)
    }
  }
}
</script>

<style scoped>
.square-container{
    padding: 0 20px;
}
.text{
    margin: 0 10px;
}
.left{
  background-color: #fafafa;
  color: #999;
  padding-left:10px;
  line-height: 50px;
  height: 50px;
  font-weight: 700;
  border: 1px solid #ccc;
}
.right{
  border: 1px solid #ccc;
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
}
</style>
